<template>
  <div class="app_wrap">
    <div class="category_box">
      <div
        :class="{
          category_item_box: true,
          is_selected: indexC == currentCategoryIndex,
        }"
        v-for="(cate, indexC) in categoryList"
        :key="indexC"
        @click="categoryClick(indexC)"
      >
        {{ cate.name }}
      </div>
    </div>

    <div
      v-for="(cate, indexC) in categoryList"
      :key="indexC"
      :class="`scroll_box  ${
        indexC == currentCategoryIndex ? 'h_z_index' : 'l_z_index'
      }`"
      :id="'SCROLL_BOX' + indexC"
    >
      <div
        :class="`animate__animated ${
          currentScrollDirection == 'bottom'
            ? 'animate__fadeInDown'
            : 'animate__fadeInUp'
        } scroll_temp ${
          indexC == currentCategoryIndex ? 'h_z_index' : 'l_z_index'
        }`"
        v-if="indexC == currentCategoryIndex"
      >
        <div class="scroll_item_box" v-for="n in 60" :key="n">
          {{ currentCategoryContentComp }}
        </div>
      </div>
    </div>
    <!-- <div class="scroll_box" id="SCROLL_BOX">
      <div v-for="n in 30" :key="n">{{ currentCategoryContentComp }}</div>
    </div> -->
  </div>
</template>

<script>
import { defineComponent, ref, onMounted, computed } from "vue";
import "./App.scss";
export default defineComponent({
  name: "App",
});
</script>
<script setup>
import _ from "lodash";

// 当前分类下标
const currentCategoryIndex = ref(0);

// 当前分类内容计算属性
const currentCategoryContentComp = computed(() => {
  return categoryList.value[currentCategoryIndex.value].content;
});

// 当前向上滚动还是向下
const currentScrollDirection = ref("bottom");

// categoryClick
const categoryClick = (tIndex) => {
  if (tIndex > currentCategoryIndex.value) {
    currentScrollDirection.value = "bottom";
  } else {
    currentScrollDirection.value = "top";
  }
  currentCategoryIndex.value = tIndex;
};

// 分类列表
let categoryList = ref([
  {
    name: "分类1",
    content: "分类1内容",
  },
  {
    name: "分类2",
    content: "分类2内容",
  },
  {
    name: "分类3",
    content: "分类3内容",
  },
  {
    name: "分类4",
    content: "分类4内容",
  },
  {
    name: "分类5",
    content: "分类5内容",
  },
  {
    name: "分类6",
    content: "分类6内容",
  },
]);

// 向上滚动处理函数
const scrollToTop = () => {
  if (currentCategoryIndex.value == 0) {
    currentCategoryIndex.value = categoryList.value.length - 1;
  } else {
    currentCategoryIndex.value -= 1;
  }
};

// 向下滚动处理函数
const scrollToBottom = () => {
  if (currentCategoryIndex.value == categoryList.value.length - 1) {
    currentCategoryIndex.value = 0;
  } else {
    currentCategoryIndex.value += 1;
  }
};

// 滚轮监听函数
const idlerWheelMonitor = () => {
  // 方式一：使用addEventListener函数监听鼠标滚轮事件
  document.addEventListener("mousewheel", debouncedSearch);
};

// 节流处理函数
const debouncedSearch = _.throttle(
  function (event) {
    // 滚动盒子元素
    const scrollBoxEl = document.getElementById(
      "SCROLL_BOX" + currentCategoryIndex.value
    );

    // Chrome、Safari、IE的mousewheel事件，滚轮向上滚动时event.wheelDelta值为120的倍数，向下滚动时为-120的倍数
    // Firefox的mousewheel事件，滚轮向上滚动时event.detail值为-3的倍数，向下滚动时为3的倍数
    var delta = Math.max(-1, Math.min(1, event.wheelDelta || -event.detail));

    // 获取鼠标相对于视口的坐标
    const mouseX = event.clientX;
    const mouseY = event.clientY;

    // 获取目标元素的边界信息
    const rect = scrollBoxEl.getBoundingClientRect();

    // 获取目标元素相对于视口的左上角坐标
    const elementLeft = rect.left;
    const elementTop = rect.top;

    // 获取目标元素的宽度和高度
    const elementWidth = rect.width;
    const elementHeight = rect.height;

    // 判断鼠标是否在目标元素内
    if (
      mouseX >= elementLeft &&
      mouseX <= elementLeft + elementWidth &&
      mouseY >= elementTop &&
      mouseY <= elementTop + elementHeight
    ) {
      console.log("鼠标在元素上");
    } else {
      console.log("鼠标不在元素上");
      // 在此处理滚轮事件
      if (delta > 0) {
        currentScrollDirection.value = "top";
        console.log("向上翻页");
        scrollToTop();
      } else if (delta < 0) {
        currentScrollDirection.value = "bottom";
        scrollToBottom();
        console.log("向下翻页");
      }
    }
  },
  300,
  {
    leading: true,
    trailing: false,
  }
);
onMounted(() => {
  idlerWheelMonitor();
});
</script>

<style lang="scss" scoped></style>
